<template>
  <div class="body">
        <div class="grid-content bg-purple">
          <p style="text-align:center;font-size: 30px;
              color: #F56C6C">用户注册</p><br>
          <el-form :model="ruleForm"
                   status-icon
                   :rules="rules"
                   ref="ruleForm"
                   label-width="100px "
                   class="demo-ruleForm">
            <el-form-item label="用户名"
                          prop="username">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码"
                          prop="password">
              <el-input type="password"
                        v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码"
                          prop="checkPassword">
              <el-input type="password"
                        v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="住址"
                          prop="address">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="性别"
                          prop="gender">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="联系方式"
                          prop="phone">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="个性签名"
                          prop="remark">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                  type="primary"
                  @click="submitForm('ruleForm')">注册完成</el-button>
              <el-button
                  @click="resetForm('ruleForm')">返回首页</el-button>
            </el-form-item>
          </el-form>
        </div>
  </div>
</template>

<script>


// export default {
//   name: 'Register.vue',
//   data () {
//     var validatePass = (rule, value, callback) => {
//       if (value === '') {
//         callback(new Error('请输入密码'))
//       } else {
//         if (this.ruleForm.checkPass !== '') {
//           this.$refs.ruleForm.validateField('checkPass')
//         }
//         callback()
//       }
//     }
//     var validatePass2 = (rule, value, callback) => {
//       if (value === '') {
//         callback(new Error('请再次输入密码'))
//       } else if (value !== this.ruleForm.pass) {
//         callback(new Error('两次输入密码不一致!'))
//       } else {
//         callback()
//       }
//     }
//     return {
//       ruleForm: {
//         username: '',
//         password: '',
//         checkPassword: '',
//         address: '',
//         gender: '',
//         phone: '',
//         remark: ''
//       },
//       rules:
//         {
//           username: [
//             {required: true, message: '请输入用户名', trigger: 'blur'},
//             {min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}
//           ],
//           password: [
//             {validator: validatePass, trigger: 'blur'},
//             {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
//           ],
//           checkPassword: [
//             {validator: validatePass2, trigger: 'blur'}
//           ],
//           phone: [
//             {required: true, message: '请输入手机号', trigger: 'blur'},
//             {min: 3, max: 5, message: '长度为11位', trigger: 'blur'}
//           ]
//         },
//       methods: {
//         submitForm (formName) {
//           this.$refs[formName].validate((valid) => {
//             if (valid) {
//               alert('submit!')
//             } else {
//               console.log('error submit!!')
//               return false
//             }
//           })
//           this.$refs[formName].validate((valid) => {
//             if (valid) {
//               alert('submit!')
//             } else {
//               console.log('error submit!!')
//               return false
//             }
//           })
//         },
//         resetForm (formName) {
//           this.$refs[formName].resetFields()
//         }
//       }
//     }
//   }
// }
</script>

<style scoped>
.body{
  margin-bottom: 20px;
  background-image: url(../assets/register.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  /* 把背景图片固定住 */
  /*background-attachment: fixed;*/
  width: 100%;
  height: 768px;
  background-color: #f4ecbd;
  display: flex;
  margin:0 auto;
  max-width: 1600px;
  padding-left: 26px;

}

.bg-purple {
  top: 0;
  left: 10px;
  flex-direction: row;
  margin:30px auto;
  z-index: 10;
  width: 521px;
  height: 600px;
  padding-top: 20px;
  /*background-color: #42b983;*/
}
</style>
